
<!-- 本次作业为设计一个矩形方块在区域内以"W"路线进行移动；

我的作业主要内容为以宽70px、高90px的马里奥为个体，在整个网页背景内以"W"路线进行移动；
路线分四步每步3s的方式以先快后慢的速度移动 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 动画W</title>
    <style>
        body{
           background: url(bg-image.jpg) center no-repeat;
           background-size: 100% 100%;
           background-attachment: fixed;
        }
        #M{
            position: relative;
            animation-name: myMario;
            animation-duration: 12s;/* 'W'总体分四段，每段3s，总共12s*/
            animation-timing-function: ease-in-out; /* 规定开始和结束较慢的过渡效果 */
            animation-iteration-count: infinite; /*无限循环*/
            animation-direction: alternate;
            animation-play-state: running;
        }
            @keyframes myMario {
         0% {
          top: 0px;
          left: 0px;
        }
        25% {
          top: 450px;
          left: 130px;
        }
        50% {
            top: 10px;
            left: 460px;
        }
        75%{
           top:380px;
           left: 880px;
        }
        100% {
          top: 0px;
          left:1100px ;
        }
      }
       
    </style>
</head>
<body>
    <div >
     
     <img src="Mario.jpg" width="70px" height="90px" id="M">
    </div>
</body>
</html>